this.ws=this.ws||{};
(function(){
    var VideoPlayer = function($dom)
    {
        this.init($dom);
    }

    var p=VideoPlayer.prototype;
    p.backgroundPos = {"play_out":"0 0","play_over":"-30px 0","play_down":"-60px 0",
                       "pause_out":"0 -30px","pause_over":"-30px -30px","pause_down":"-60px -30px",
                       "volume_out":"0 -60px","volume_over":"-30px -60px","volume_down":"-60px -60px",
                       "noVolume_out":"0 -90px","noVolume_over":"-30px -90px","noVolume_down":"-60px -90px",
                       "normal_out":"0 -120px","normal_over":"-30px -120px","normal_down":"-60px -120px",
                       "full_out":"0 -150px","full_over":"-30px -150px","full_down":"-60px -150px"};
    p.tatalTime=0;
    p.curTime=0;
	
	p.setSrc = function(ary)
	{
		//this.video.close();
		this.$source.each(function(i){
			$(this).attr("src",ary[i]);
		});
		this.video.load();
	};

    p.init=function($dom)
    {
        var cur = this;
        this.$dom = $dom;
        this.video = $dom.children(".myVideo").get(0);
		this.$source = $dom.children(".myVideo").children("source");
        this.$loadingMask = $dom.children(".loadingMask");
        this.$playMask = $dom.children(".playMask");
        this.$playIcon = $dom.children(".playMask").children(".playIcon");
        this.$controlPanel = $dom.children(".controlPanel");
        this.$progress = this.$controlPanel.children(".progress");
        this.$loadBar = this.$controlPanel.children(".progress").children(".loadBar");
        this.$timeBar = this.$controlPanel.children(".progress").children(".timeBar");
        this.$dragger = this.$controlPanel.children(".progress").children(".dragger");
        this.$play = this.$controlPanel.children(".play");
        this.$timeLabel = this.$controlPanel.children(".timeLabel");
        this.$volumeIcon = this.$controlPanel.children(".volume").children(".volumeIcon");
        this.$volumePanel = this.$controlPanel.children(".volume").children(".volumePanel");
        this.$fullScreen = this.$controlPanel.children(".fullScreen");

        this.initVideo();
        this.initControl();

        //------------------------fullScreenBtn------------------------------//
        //firefox中只有把全屏事件加在docment上才能被触发
        document.addEventListener(ws.fullScreenApi.fullScreenEventName, function() {
            if (ws.fullScreenApi.isFullScreen())
            {
                cur.$progress.width(screen.width-300);
            } else {
                cur.$progress.width(350);
            }
            cur.$fullScreen.triggerHandler("mouseleave");
            cur.setTimeBar();
        }, false);
        this.$fullScreen.mouseenter(function(){
            if (ws.fullScreenApi.isFullScreen())
            {
                $(this).css("backgroundPosition",cur.backgroundPos["full_over"]);
            } else {
                $(this).css("backgroundPosition",cur.backgroundPos["normal_over"]);
            }
        });
        this.$fullScreen.mouseleave(function(){
            if (ws.fullScreenApi.isFullScreen())
            {
                $(this).css("backgroundPosition",cur.backgroundPos["full_out"]);
            } else {
                $(this).css("backgroundPosition",cur.backgroundPos["normal_out"]);
            }
        })
        this.$fullScreen.mousedown(function(){
            if (ws.fullScreenApi.isFullScreen())
            {
                $(this).css("backgroundPosition",cur.backgroundPos["full_down"]);
            } else {
                $(this).css("backgroundPosition",cur.backgroundPos["normal_down"]);
            }
        })
        this.$fullScreen.mouseup(function(){
            console.log(ws.fullScreenApi.fullScreenEventName);
            if(ws.fullScreenApi.isFullScreen())
            {
                ws.fullScreenApi.cancelFullScreen();
            }
            else
            {
                cur.$dom.requestFullScreen();
            }
        });
    }

    p.initVideo=function()
    {
        var cur=this;
        //当浏览器已加载音频/视频的元数据时
        this.video.addEventListener("loadedmetadata", function () {
            cur.totalTime= this.duration.toFixed(0);
            cur.setTimeBar();
            cur.setTimeLabel();
        }, false);
        //当浏览器正在下载音频/视频时
        this.video.addEventListener("progress",function(e){
            if (cur.video.buffered.length > 0) {
                var per = (cur.video.buffered.end(0) / cur.video.duration) * 100;
                cur.$loadBar.css("width",per+"%");
            }
        },false);
        //当目前的播放位置已更改时
        this.video.addEventListener("timeupdate", function () {
            cur.curTime= this.currentTime.toFixed(0);
            console.log(cur.curTime);
            cur.setTimeBar();
            cur.setTimeLabel();
        }, false);
        //当视频由于需要缓冲下一帧而停止
        this.video.addEventListener("waiting",function(){
            cur.$loadingMask.fadeIn();
        }, false);
        //当浏览器可在不因缓冲而停顿的情况下进行播放时
        this.video.addEventListener("canplaythrough", function () {
            cur.$loadingMask.fadeOut();
        }, false);
        //当音频/视频已暂停时
        this.video.addEventListener("pause", function () {
            cur.$playMask.fadeIn();
            cur.$play.css("backgroundPosition",cur.backgroundPos["play_out"]);
        }, false);
        //当音频/视频已开始或不再暂停时
        this.video.addEventListener("play", function () {
            cur.$playMask.fadeOut();
            cur.$play.css("backgroundPosition",cur.backgroundPos["pause_out"]);
        }, false);
        //当目前的播放列表已结束时
        this.video.addEventListener("ended", function () {
            cur.video.currentTime = 0;
            cur.setTimeBar();
            cur.setTimeLabel();
        }, false);
    };

    p.setTimeBar = function()
    {
        var targetX=(this.curTime/this.totalTime)*(this.$progress.width()-this.$dragger.width());
        this.$dragger.css("left",targetX);
        this.$timeBar.width(targetX);
    };

    p.setTimeLabel = function ()
    {
        this.$timeLabel.text(this.timeToFormat(this.curTime)+"/"+this.timeToFormat(this.totalTime));
    };

    p.timeToFormat = function (t)
    {
        var h=Math.floor(t/(60*60));
        var m=Math.floor(t/60)%60;
        var s=t%60;

        var h_str=this.zeroFormat(h);
        var m_str=this.zeroFormat(m);
        var s_str=this.zeroFormat(s);

        var str=h_str+":"+m_str+":"+s_str;
        return str;
    };

    p.zeroFormat = function (num)
    {
        var str=num;
        if(num<10)
        {
            str="0"+num;
        }
        return str;
    };

    p.initControl = function()
    {
        var cur = this;
        this.$playIcon.click(function(){
            cur.video.play();
        });
        this.$play.mouseenter(function(){
            if (cur.video.paused)
            {
                $(this).css("backgroundPosition",cur.backgroundPos["play_over"]);

            }else
            {
                $(this).css("backgroundPosition",cur.backgroundPos["pause_over"]);
            }
        });
        this.$play.mouseleave(function(){
            if (cur.video.paused)
            {
                $(this).css("backgroundPosition",cur.backgroundPos["play_out"]);
            }else
            {
                $(this).css("backgroundPosition",cur.backgroundPos["pause_out"]);
            }
        });
        this.$play.mousedown(function(){
            if (cur.video.paused)
            {
                $(this).css("backgroundPosition",cur.backgroundPos["play_down"]);
            }else
            {
                $(this).css("backgroundPosition",cur.backgroundPos["pause_down"]);

            }
        });
        this.$play.mouseup(function(){
            if (cur.video.paused)
            {
                cur.video.play();

            } else {
                cur.video.pause();
            }
            cur.$play.triggerHandler("mouseenter");
        });

        //---------------------progress------------------------------//
        var progressScrollBar = new ws.HScrollBar(this.$progress);
        $(progressScrollBar).bind("changePer",function(e,per){
            cur.video.currentTime = cur.totalTime*per;
        });

        //---------------------------volume-----------------------------------//
        var volumePanel = new ws.VScrollBar(this.$volumePanel);
        $(volumePanel).bind("changePer",function(e,per){
            cur.video.volume = per;
        });
        this.$volumeIcon.mouseenter(function(){
            if(cur.video.volume==0)
            {
                $(this).css("backgroundPosition",cur.backgroundPos["noVolume_over"]);

            }else
            {
                $(this).css("backgroundPosition",cur.backgroundPos["volume_over"]);
            }
        });
        this.$volumeIcon.mouseleave(function(){
            if(cur.video.volume == 0)
            {
                $(this).css("backgroundPosition",cur.backgroundPos["noVolume_out"]);

            }else
            {
                $(this).css("backgroundPosition",cur.backgroundPos["volume_out"]);
            }
        });
        this.$volumeIcon.mousedown(function(){
            if(cur.video.volume==0)
            {
                $(this).css("backgroundPosition",cur.backgroundPos["noVolume_down"]);

            }else
            {
                $(this).css("backgroundPosition",cur.backgroundPos["volume_down"]);
            }
        });
        this.$volumeIcon.mouseup(function(){
            $(this).triggerHandler("mouseleave");
            if(cur.$volumePanel.css("visibility")=="visible")
            {
                cur.$volumePanel.animate({opacity:0},500,function(){
                    cur.$volumePanel.css("visibility","hidden");
                });
            }
            else
            {
                cur.$volumePanel.css("visibility","visible");
                cur.$volumePanel.animate({opacity:1},500);
            }

        });
    };

    ws.VideoPlayer = VideoPlayer;
})();

//-----------------------------------------HScrollBar------------------------------------//
(function(){
    var HScrollBar=function($dom)
    {
        this.init($dom);
    }

    var p=HScrollBar.prototype;
    p.isDown=false;
    p.mouseDownX=0;
    p.downX=0;

    p.init=function($dom)
    {
        this.$dom=$dom;
        this.$bg=this.$dom.children(".bg");
        this.$loadBar=this.$dom.children(".loadBar");
        this.$timeBar=this.$dom.children(".timeBar");
        this.$dragger=this.$dom.children(".dragger");
        //
        var cur=this;
        this.$dragger.mousedown(function(event){
            cur.isDown=true;
            cur.mouseDownX=event.pageX;
            cur.downX=cur.$dragger.position().left;
        });
        $(document).mouseup(function(event){
            cur.isDown=false;
        });
        $(document).mousemove(function(event){
            if(cur.isDown){
                var posX=event.pageX-cur.mouseDownX+cur.downX;
                if(posX<0) posX=0;
                var rightX=cur.$bg.width()-cur.$dragger.width();
                if(posX>rightX) posX=rightX;
                cur.setPosition(posX);
            }
        });
        //
        this.$dom.click(function(e){
            var posX=e.pageX-$(this).offset().left;
            if(posX<0) posX=0;
            var rightX=cur.$bg.width()-cur.$dragger.width();
            if(posX>rightX) posX=rightX;
            cur.setPosition(posX);
        });
    }

    p.setPosition=function(posX)
    {
        this.$dragger.css("left",posX);
        this.$timeBar.width(posX);
        var per=this.$dragger.position().left/(this.$bg.width()-this.$dragger.width());
        $(this).triggerHandler("changePer",per);
    }
    ws.HScrollBar=HScrollBar;
})();

//-----------------------------------------VScrollBar------------------------------------//
(function(){
    var VScrollBar=function($dom)
    {
        this.init($dom);
    }

    var p=VScrollBar.prototype;
    p.isDown=false;
    p.mouseDownY=0;
    p.downY=0;

    p.init=function($dom)
    {
        this.$dom=$dom;
        this.$scrollBar=this.$dom.children(".scrollBar");
        this.$dragger=this.$dom.children(".scrollBar").children(".dragger");
        this.$bar=this.$dom.children(".scrollBar").children(".bar");
        this.$bg=this.$dom.children(".scrollBar").children(".bg");
        //
        var cur=this;
        this.$dragger.mousedown(function(event){
            cur.isDown=true;
            cur.mouseDownY=event.pageY;
            cur.downY=cur.$dragger.position().top;
        });
        $(document).mouseup(function(){
            cur.isDown=false;
        });
        this.$dom.mouseup(function(){
            if(cur.$dom.css("visibility")=="visible")
            {
                cur.$dom.animate({opacity:0},500,function(){
                    cur.$dom.css("visibility","hidden");
                });
            }
        });
        $(document).mousemove(function(event){
            if(cur.isDown){
                event.preventDefault();
                var posY=event.pageY-cur.mouseDownY+cur.downY;
                if(posY<0) posY=0;
                var bottomY=cur.$scrollBar.height()-cur.$dragger.height();
                if(posY>bottomY) posY=bottomY;
                cur.setPosition(posY);
            }
        });
        //
        this.$dom.click(function(e){
            var posY=e.pageY-$(this).offset().top;
            if(posY<0) posY=0;
            var bottomY=cur.$scrollBar.height()-cur.$dragger.height();
            if(posY>bottomY) posY=bottomY;
            cur.setPosition(posY);
        });
    };

    p.setPosition=function(posY)
    {
        this.$dragger.css("top",posY);
        this.$bg.css("height",posY);
        var per=1-this.$dragger.position().top/(this.$scrollBar.height()-this.$dragger.height());
        $(this).triggerHandler("changePer",per);
    };

    ws.VScrollBar=VScrollBar;
})()
